<template>
  <van-nav-bar :title="OPERTYPE == 'RESEND' ? t('home.换单重发') : t('home.换单')" left-arrow @click-left="onClickLeft" />
  <div class="p-2 mx-auto">
    <van-popup
      :show="state.show"
      round
      position="bottom"
      @close="closePopup"
      style="padding: 10px"
    >
      <van-picker
        v-if="state.option.length > 0"
        :title="t('inChange.请选择打印机')"
        :confirm-button-text="t('confirm')"
        :cancel-button-text="t('cancel')"
        :columns="state.option"
        :default-index="2"
        @confirm="handleChange"
        @cancel="closePopup"
      >
      </van-picker>
      <van-empty v-else :description="t('inChange.打印机列表为空')" :image="img_index_path"/>
    </van-popup>

    <van-row>
      <van-col span="12">
        <van-cell :title="t('inChange.打印机')"> </van-cell>
      </van-col>
      <van-col span="12">
        <van-cell
          :title="state.currentItem ? state.currentItem.text : t(`inChange.请选择打印机`)"
          is-link
          @click="showPopup"
      /></van-col>
    </van-row>

    <van-cell v-if="OPERTYPE == 'RESEND'" :title="t('inChange.自动签出')"> 
      <van-switch v-model="autoSignOut"  @change="autoSignOutChange"/>
    </van-cell>

    <!-- <van-field v-model="scan" label="" :placeholder="t('inChange.请扫描大包号')" /> -->
    <div class="van-cell van-field">
      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <input
            v-model="scan"
            type="text"
            id="van-field-2-input"
            class="van-field__control"
            :placeholder="t('inChange.请扫描小包号')"
            @keydown.enter="handleScan"
          />
        </div>
      </div>
    </div>
    <van-row class="p-3 bg-white">
      <van-col span="12"> {{ t("inChange.小包号") }} </van-col>
      <van-col span="12">
        {{ t("inChange.操作记录") }}
        <van-tag  
              >{{ dataList.length }}</van-tag>
              <van-tag  type="success"
              >{{ dataList.filter(i=>i.status).length }}</van-tag>
              <van-tag  type="danger"
              >{{ dataList.filter(i=>!i.status).length }}</van-tag>
      </van-col>
    </van-row>

    <template v-if="dataList.length > 0">
      <template v-for="item in dataList" :key="item.id">
        <van-row
          class="p-3 bg-white"
          :style="
            item.status
              ? 'color:green;border-bottom: 1px solid #f4f4f4;'
              : 'color:red;border-bottom: 1px solid #f4f4f4;'
          "
        >
          <van-col span="12">
            {{ item.packageNo }}
          </van-col>
          <van-col span="12">
            {{ item.info }}
          </van-col>
        </van-row>
      </template>
    </template>
    <van-empty v-else :description="t('noData')" :image="img_index_path" />
  </div>
</template>

<script setup lang="ts">
import img_index_path from '~/noData.png'; 
// import router from "@/router";
// import { useStore } from "@/stores";
import { localStorage } from "@/utils/local-storage";
// import Vue from 'vue';
// Vue.use(Toast);
import {
  postRequest,
  // queryProse,
  // getRequest
} from "@/api";
import { useI18n } from "vue-i18n";
// import { showNotify, showFailToast } from "vant";
import {
  // STORAGE_TOKEN_KEY,
  // STORAGE_LANG_KEY,
  STORAGE_PRINTER_KEY,
} from "@/stores/mutation-type";
import { AppToast } from "@/utils/appToast";
const { t } = useI18n();
const state = reactive({
  show: false,
  option: [],
  currentItem: null,
});

const OPERTYPE = ref("");
const autoSignOut = ref(true);
function autoSignOutChange(e) { 
  autoSignOut.value = e;
}
function getPathParamsByName(name) {
  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  const r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
} 

const init = async () => { 
  // 获取路径参数
  OPERTYPE.value = getPathParamsByName("operType");
  // const res = await getRequest('/printer/list')
  // if(res.code == 200){
  //   state.option = res.data
  // }else{
  //   showFailToast(res.msg)
  // }
  state.option = [
    {
      value: "123456",
      text: "dyj01",
    },
    {
      value: "dyj02",
      text: "dyj02",
    }
  ];

  if (localStorage.get(STORAGE_PRINTER_KEY)) {
    state.currentItem = state.option.find(
      (item) => item.value === localStorage.get(STORAGE_PRINTER_KEY)
    );
  }
};
init();
const handleChange = (e: any): void => {
  const value = e.selectedOptions[0].value;
  localStorage.set(STORAGE_PRINTER_KEY, value);
  state.currentItem = state.option.find((item) => item.value === value);
  state.show = false;
  AppToast(t("inChange.切换成功"));
};
const showPopup = () => {
  state.show = true;
};
const closePopup = () => {
  state.show = false;
};
// const store = useStore();
const onClickLeft = () => history.back();
const scan = ref("");
const dataList = ref([
  // {
  //   id: 1,
  //   packageNo: "123456789",
  //   status: 1,
  //   info: "成功",
  // },
  // {
  //   id: 2,
  //   packageNo: "123456789",
  //   status: 0,
  //   info: "失败",
  // }
]);
const handleScan = () => {
  if (!state.currentItem) {
    AppToast(t("inChange.请选择打印机"), "danger", true);
    scan.value = "";
    return;
  }
  if (scan.value) {
    //换单重发
    if(OPERTYPE.value == 'RESEND'){
      postRequest("/gr/inChange/resend", { packageNo: scan.value }).then((res) => {
      if (res.code === 200) {
        dataList.value.unshift({
          id: dataList.value.length + 1,
          packageNo: scan.value,
          status: 1,
          info: t("success"),
        });
        scan.value = "";
        AppToast(t("success"));
      } else {
        dataList.value.unshift({
          id: dataList.value.length + 1,
          packageNo: scan.value,
          status: 0,
          info: t("fail"),
        });
        scan.value = "";
        AppToast(t("fail")+' '+res.message, "fail",true);
      }
    });
    }else{
      //换单
      postRequest("/gr/inChange", { packageNo: scan.value }).then((res) => {
      if (res.code === 200) {
        dataList.value.unshift({
          id: dataList.value.length + 1,
          packageNo: scan.value,
          status: 1,
          info: t("success"),
        });
        scan.value = "";
        AppToast(t("success"));
      } else {
        dataList.value.unshift({
          id: dataList.value.length + 1,
          packageNo: scan.value,
          status: 0,
          info: t("fail"),
        });
        scan.value = "";
        AppToast(t("fail")+' '+res.message, "fail",true);
      }
    });
    }
    
  } else {
    AppToast(t("inChange.请扫描小包号"), "danger", true);
  }
};
</script>

<style lang="less" scoped></style>
